{% extends 'index/index.html' %}

{% block list_notes %}
    <style>
        .layui-panel h2 {
            height: 100px;
            width: 100%;
            padding: 30px;

        }
    </style>
    {% if count == 0 %}
        <div>
            <span>还没有笔记，点击添加</span>
        </div>
    {% endif %}


    {% if count > 0 %}
        <table id="note-list" lay-filter="note-data">
        </table>
        <script type="text/html" id="test-dropdown-toolbar-barDemo">
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
        </script>

    {% endif %}

    <script>
        //layui.use(['layer', 'table', 'dropdown']);
        var layer = layui.layer;
        var table = layui.table;
        var dropdown = layui.dropdown;
        console.log(layer)
        console.log(table)
        console.log(dropdown)

        table.render({
            elem: '#note-list'
            , height: 420
            , url: '/note/list/' //数据接口（此处为静态数据，仅作演示）
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'title', title: '标题', width: 180}
                , {field: 'created_time', title: '创建时间', width: 280, sort: true}
                , {field: 'update_time', title: '修改时间', width: 280, sort: true}
                , {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        // 头工具栏事件
        table.on('toolbar(note-data)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }

        });

        // 单元格工具事件
        table.on('tool(note-data)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    ,
                    click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                        } else if (menudata.id === 'edit') {
                            layer.msg('编辑操作，当前行 ID:' + data.id);
                        }
                    }
                    , align: 'right' //右对齐弹出
                    , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            }


        })

    </script>

{% endblock %}